<template>
  <div class="page-container">
    <!-- 良品率概览 -->
    <a-row :gutter="16">
      <a-col :span="12" v-for="stat in statistics" :key="stat.title">
        <a-card class="stat-card" :bodyStyle="{ padding: '16px' }">
          <div class="stat-content">
            <component :is="stat.icon" class="stat-icon" :class="stat.type" />
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 良品率趋势 -->
    <a-card class="trend-card">
      <template #title>
        <div class="card-header">
          <span>良品率趋势</span>
          <a-radio-group v-model:value="timeRange" size="small">
            <a-radio-button value="day">今日</a-radio-button>
            <a-radio-button value="week">本周</a-radio-button>
            <a-radio-button value="month">本月</a-radio-button>
          </a-radio-group>
        </div>
      </template>
      <div class="chart-container">
        <v-chart class="chart" :option="trendChartOption" autoresize />
      </div>
    </a-card>

    <!-- 不良品分析 -->
    <a-card class="defect-card">
      <template #title>不良品分析</template>
      <div class="defect-content">
        <div class="defect-chart">
          <v-chart class="chart" :option="defectChartOption" autoresize />
        </div>
        <div class="defect-list">
          <a-table
            :dataSource="defectList"
            :columns="defectColumns"
            :pagination="false"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'trend'">
                <span :class="record.trend > 0 ? 'trend-up' : 'trend-down'">
                  {{ record.trend > 0 ? '+' : '' }}{{ record.trend }}%
                </span>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>

    <!-- 质量预警 -->
    <a-card class="alert-card">
      <template #title>
        <div class="card-header">
          <span>质量预警</span>
          <a-button type="link">查看全部</a-button>
        </div>
      </template>
      <a-list :dataSource="alerts" :pagination="false">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta>
              <template #avatar>
                <a-avatar :style="{ backgroundColor: item.level === 'high' ? '#ff4d4f' : '#faad14' }">
                  <template #icon><warning-outlined /></template>
                </a-avatar>
              </template>
              <template #title>
                <div class="alert-title">
                  <span>{{ item.title }}</span>
                  <a-tag :color="item.level === 'high' ? 'error' : 'warning'">
                    {{ item.level === 'high' ? '严重' : '警告' }}
                  </a-tag>
                </div>
              </template>
              <template #description>
                <div class="alert-content">
                  <div class="alert-desc">{{ item.description }}</div>
                  <div class="alert-time">{{ item.time }}</div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  LineChartOutlined,
  RiseOutlined,
  FallOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons-vue'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkPointComponent
])

// 统计数据
const statistics = ref([
  {
    title: '今日良品率',
    value: '95.8%',
    icon: LineChartOutlined,
    type: 'primary'
  },
  {
    title: '周平均良品率',
    value: '96.2%',
    icon: RiseOutlined,
    type: 'success'
  },
  {
    title: '不良品数量',
    value: '42',
    icon: FallOutlined,
    type: 'warning'
  },
  {
    title: '质量预警',
    value: '3',
    icon: WarningOutlined,
    type: 'error'
  }
])

// 时间范围选择
const timeRange = ref('day')

// 良品率趋势图表配置
const trendChartOption = ref({
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      let result = params[0].axisValue + '<br/>'
      params.forEach(param => {
        const color = param.color
        const value = param.value
        const seriesName = param.seriesName
        result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
        result += `${seriesName}: ${value}%<br/>`
      })
      return result
    }
  },
  legend: {
    data: ['良品率', '目标值', '历史最佳']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: {
    type: 'value',
    name: '良品率',
    min: 90,
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '良品率',
      type: 'line',
      smooth: true,
      data: [95.2, 96.1, 95.8, 96.5, 95.9, 96.2, 95.8],
      markPoint: {
        data: [
          { type: 'max', name: '最高值' },
          { type: 'min', name: '最低值' }
        ]
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ]
      }
    },
    {
      name: '目标值',
      type: 'line',
      data: [95, 95, 95, 95, 95, 95, 95],
      lineStyle: {
        type: 'dashed'
      }
    },
    {
      name: '历史最佳',
      type: 'line',
      data: [96.5, 96.5, 96.5, 96.5, 96.5, 96.5, 96.5],
      lineStyle: {
        type: 'dotted'
      }
    }
  ]
})

// 不良品分析图表配置
const defectChartOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      name: '不良品类型',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 15, name: '尺寸偏差' },
        { value: 10, name: '表面缺陷' },
        { value: 8, name: '材料问题' },
        { value: 5, name: '其他' }
      ]
    }
  ]
})

// 不良品列表列定义
const defectColumns = [
  {
    title: '不良品类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
    sorter: (a, b) => a.count - b.count
  },
  {
    title: '占比',
    dataIndex: 'percentage',
    key: 'percentage',
    sorter: (a, b) => a.percentage - b.percentage
  },
  {
    title: '趋势',
    dataIndex: 'trend',
    key: 'trend'
  }
]

// 不良品列表数据
const defectList = ref([
  {
    key: '1',
    type: '尺寸偏差',
    count: 15,
    percentage: '39.5%',
    trend: -2.5
  },
  {
    key: '2',
    type: '表面缺陷',
    count: 10,
    percentage: '26.3%',
    trend: 1.2
  },
  {
    key: '3',
    type: '材料问题',
    count: 8,
    percentage: '21.1%',
    trend: -0.8
  },
  {
    key: '4',
    type: '其他',
    count: 5,
    percentage: '13.1%',
    trend: 0.5
  }
])

// 质量预警列表
const alerts = ref([
  {
    key: '1',
    title: 'CNC-001 尺寸偏差超标',
    description: '连续3次检测到尺寸偏差超过允许范围',
    level: 'high',
    time: '10分钟前'
  },
  {
    key: '2',
    title: 'CNC-002 表面质量异常',
    description: '表面粗糙度检测不合格',
    level: 'warning',
    time: '30分钟前'
  },
  {
    key: '3',
    title: 'CNC-003 材料异常',
    description: '材料硬度检测值偏低',
    level: 'warning',
    time: '1小时前'
  }
])

// 模拟数据更新
onMounted(() => {
  // 这里可以添加实际的数据获取逻辑
})
</script>

<style lang="less" scoped>
.stat-cards {
  margin-bottom: 16px;
}

.stat-card {
  margin-bottom: 16px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 24px;
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  
  &.primary {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
  }
  
  &.success {
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
  }
  
  &.warning {
    color: #faad14;
    background-color: rgba(250, 173, 20, 0.1);
  }
  
  &.error {
    color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.stat-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.trend-card,
.defect-card,
.alert-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.chart {
  height: 100%;
}

.defect-content {
  display: flex;
  gap: 24px;
}

.defect-chart {
  flex: 1;
  height: 300px;
}

.defect-list {
  width: 400px;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

.alert-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-desc {
  color: rgba(0, 0, 0, 0.65);
}

.alert-time {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}
</style> 